<template>
  <div class="home-product-brand">
    <item-title title="热门品牌" more-text="更多品牌" more-url="/product/brand-list" class="title" />
    <ul class="list">
      <li
        v-for="(item, index) in home.brand"
        :key="index"
        class="list-item"
      >
        <div class="header">
          <span class="image">
            <img v-lazy="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
          </span>
          <span class="desc">
            <span class="title">{{ item.name }}</span>
            <ul class="tag" v-if="item.tags && item.tags.length > 0">
              <li class="tag-item" v-for="(o, i) in item.tags" :key="i">
                <template v-if="o && o.length > 0">
                  <span class="first" v-if="i === 0">{{ o }}</span>
                  <span class="second" v-else-if="i % 3 === 1">{{ o }}</span>
                  <span class="third" v-else>{{ o }}</span>
                </template>
              </li>
            </ul>
          </span>
        </div>
        <ul class="product" v-if="item.products && item.products.length > 0">
          <li class="product-item" v-for="(o, i) in item.products" :key="i" @click="$router.push(`/product/detail/${o.id}`)">
            <span class="image">
              <img v-lazy="o.mainImage.thumbnail_path" v-if="o.mainImage && o.mainImage.thumbnail_path" />
            </span>
            <span class="title">{{ o.title }}</span>
            <div class="price">
              <span class="new">￥{{ +o.price }}</span>
              <span class="old">￥{{ +o.price_old }}</span>
            </div>
          </li>
        </ul>
        <div class="button" @click="$router.push(`/product/brand-view/${item.id}`)">全部商品</div>
      </li>
    </ul>
  </div>
</template>

<script>
import ItemTitle from './_ItemTitle'
export default {
  name: 'HomeProductBrand',
  props: ['home'],
  components: { ItemTitle },
  data() {
    return {
    }
  }
}
</script>

<style scoped lang="stylus">
.home-product-brand
  margin 0 10px
  .title
    margin-bottom -5px
  .list
    .list-item
      background white
      padding 10px
      margin 10px 0
      border-radius 10px
      position relative
      .header
        display flex
        .image
          width 70px
          padding 1px
          img
            border-radius 5px
        .desc
          flex 1
          text-align left
          //background red
          .title
            font-weight 700
            font-size 16px
            line-height 22px
          .tag
            margin-top 15px
            .tag-item
              display inline-block
              margin-right 10px
              .first, .second, .third
                padding 5px 10px
                border-radius 10px
              .first
                color #feb854
                background #fef3d9
              .second
                color #6cceac
                background #dbf6ed
              .third
                color #f96a43
                background #feefea
      .product
        display flex
        justify-content space-between
        .product-item
          padding 5px
          box-sizing border-box
          width 100px
          //background red
          overflow hidden
          .image
            border-radius 5px
            //width 65px
            display block
            margin auto
            background red
            img
              border-radius 5px
          .title
            display block
            //width 60px
            font-size 14px
            font-weight 700
            height 30px
            line-height 30px
            white-space nowrap
            overflow hidden
            //text-align left
            text-overflow ellipsis
          //background red
          .price
            display flex
            justify-content start
            height 30px
            line-height 30px
            .new
              color $second_color
              font-weight 700
              font-size 14px
            .old
              color #5a5a5a
              text-decoration line-through
              margin-left 5px
      .button
        position absolute
        right 10px
        top 10px
        background white
        border 1px solid $main_color
        color $main_color
        padding 5px 10px
        border-radius 10px
</style>
